<template>
  <div class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
      <!-- 任务统计信息 -->
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">总事项列表</h2>
        <div class="text-sm text-gray-500 dark:text-gray-300">
          <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
            高优先级: {{ taskStore.priorityCounts.high }}
          </span>
          <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
            中优先级: {{ taskStore.priorityCounts.medium }}
          </span>
          <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
            低优先级: {{ taskStore.priorityCounts.low }}
          </span>
          <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
            已完成: {{ taskStore.completedCount }} / 总共: {{ taskStore.taskCount }}
          </span>
        </div>
      </div>

      <!-- 批量操作工具栏 -->
      <div v-if="selectedTaskIds.length > 0" class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg mb-6">
        <div class="flex flex-wrap gap-2">
          <button
            @click="batchMarkAsCompleted(true)"
            class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors"
          >
            <i class="fas fa-check mr-2"></i>标记为完成
          </button>
          <button
            @click="batchMarkAsCompleted(false)"
            class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-md transition-colors"
          >
            <i class="fas fa-times mr-2"></i>标记为未完成
          </button>
          <div class="relative">
            <select
              v-model="batchPriority"
              @change="batchUpdatePriority"
              class="pl-3 pr-10 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
            >
              <option value="">更改优先级</option>
              <option value="high">高</option>
              <option value="medium">中</option>
              <option value="low">低</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <i class="fas fa-chevron-down text-xs"></i>
            </div>
          </div>
          <button
            @click="batchDelete"
            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
          >
            <i class="fas fa-trash mr-2"></i>删除所选
          </button>
        </div>
      </div>

      <!-- 过滤和搜索 -->
      <div class="flex flex-wrap gap-4 mb-4">
        <div class="flex space-x-2">
          <button 
            @click="setFilter('all')" 
            :class="{ 'bg-blue-500 text-white': taskStore.filter === 'all' }"
            class="px-4 py-2 rounded-md text-sm"
          >
            全部
          </button>
          <button 
            @click="setFilter('pending')" 
            :class="{ 'bg-blue-500 text-white': taskStore.filter === 'pending' }"
            class="px-4 py-2 rounded-md text-sm"
          >
            待办
          </button>
          <button 
            @click="setFilter('completed')" 
            :class="{ 'bg-blue-500 text-white': taskStore.filter === 'completed' }"
            class="px-4 py-2 rounded-md text-sm"
          >
            已完成
          </button>
        </div>
        
        <div class="relative flex-1 max-w-md">
          <input
            type="text"
            v-model="searchQuery"
            @input="setSearchQuery"
            placeholder="搜索任务..."
            class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
          >
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <i class="fas fa-search text-gray-400"></i>
          </div>
        </div>
      </div>

      <!-- 任务列表 -->
      <ul class="space-y-2">
        <li
          v-for="task in taskStore.filteredTasks"
          :key="task.id"
          class="p-3 border border-gray-200 rounded-md flex items-center justify-between transition-all hover:shadow-sm"
        >
          <div class="flex items-center">
            <!-- 批量选择复选框 -->
            <input
              type="checkbox"
              v-model="selectedTaskIds"
              :value="task.id"
              class="mr-3 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
            >

            <!-- 任务完成状态复选框 -->
            <input
              type="checkbox"
              :checked="task.completed"
              @change="toggleTaskCompleted(task.id)"
              class="mr-3 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
            >

            <span
              class="flex-1"
              :class="{ 'line-through text-gray-400': task.completed }"
            >
              {{ task.title }}
            </span>

            <!-- 优先级标签 -->
            <span
              v-if="task.priority"
              class="ml-2 px-2 py-0.5 rounded-full text-xs font-medium"
              :class="{
                'bg-red-100 text-red-800': task.priority === 'high',
                'bg-yellow-100 text-yellow-800': task.priority === 'medium',
                'bg-green-100 text-green-800': task.priority === 'low'
              }"
            >
              {{ task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低' }}
            </span>

            <!-- 截止日期 -->
            <span
              v-if="task.dueDate"
              class="ml-2 px-2 py-0.5 rounded-full text-xs bg-gray-100 text-gray-800"
            >
              {{ formatDate(task.dueDate) }}
            </span>

            <!-- 标签 -->
            <div class="flex flex-wrap ml-2">
              <span
                v-for="tag in task.tags"
                :key="tag"
                class="ml-1 px-2 py-0.5 rounded-full text-xs bg-blue-100 text-blue-800"
              >
                {{ tag }}
              </span>
            </div>
          </div>
          <button
            @click="deleteTask(task.id)"
            class="text-red-500 hover:text-red-700"
          >
            <i class="fa fa-trash"></i>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useTaskStore } from '../stores/taskStore';

// 导入任务状态管理
const taskStore = useTaskStore();
const searchQuery = ref('');
const batchPriority = ref('');

// 选中的任务ID
const selectedTaskIds = ref([]);

// 切换任务完成状态
const toggleTaskCompleted = (taskId) => {
  taskStore.toggleTaskCompleted(taskId);
};

// 批量标记完成/未完成
const batchMarkAsCompleted = (completed) => {
  taskStore.batchToggleCompleted(selectedTaskIds.value, completed);
  selectedTaskIds.value = [];
};

// 批量更新优先级
const batchUpdatePriority = () => {
  if (selectedTaskIds.value.length === 0 || !batchPriority.value) return;
  taskStore.batchUpdatePriority(selectedTaskIds.value, batchPriority.value);
  selectedTaskIds.value = [];
  batchPriority.value = '';
};

// 批量删除任务
const batchDelete = () => {
  if (selectedTaskIds.value.length === 0) return;
  if (confirm(`确定要删除选中的 ${selectedTaskIds.value.length} 个任务吗？`)) {
    taskStore.batchDelete(selectedTaskIds.value);
    selectedTaskIds.value = [];
  }
};

// 删除单个任务
const deleteTask = (taskId) => {
  if (confirm('确定要删除这个任务吗？')) {
    taskStore.deleteTask(taskId);
  }
};

// 设置过滤
const setFilter = (filter) => {
  taskStore.setFilter(filter);
};

// 设置搜索
const setSearchQuery = () => {
  taskStore.setSearchQuery(searchQuery.value);
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 加载任务
taskStore.loadTasks();
</script>

<style scoped>
/* 添加一些基本样式 */
.task-list {
  transition: all 0.3s ease;
}

.task-card {
  transition: all 0.2s ease;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.priority-tag {
  transition: all 0.2s ease;
}

.priority-tag:hover {
  transform: scale(1.05);
}

.tag {
  transition: all 0.2s ease;
}

.tag:hover {
  transform: translateY(-1px);
}
</style>
